<template>
    <view>
        <NavBar title="修改密码" @back="goBack" />
        <view class="form-list">
            <view class="list-item">
                <text class="title">原密码</text>
                <view class="password-input">
                    <uv-input v-model="oldPassword" class="input-iem" placeholder="请输入密码"
                        :type="oldPassword ? 'password' : 'text'"></uv-input>
                </view>
            </view>
        </view>
        <view class="form-list">
            <view class="list-item">
                <text class="title">新密码</text>
                <view class="password-input">
                    <uv-input v-model="newPassword" class="input-iem" placeholder="请输入密码"
                        :type="isShow ? 'password' : 'text'"></uv-input>
                    <uv-icon v-show="newPassword" class="icon" :name="isShow ? 'eye' : 'eye-off-outline'"
                        @click="isShow = !isShow"></uv-icon>
                </view>
            </view>
        </view>
        <view class="form-list">
            <view class="list-item">
                <text class="title">确认密码</text>
                <view class="password-input">
                    <uv-input v-model="conPassword" class="input-iem" placeholder="请输入密码"
                        :type="isShows ? 'password' : 'text'"></uv-input>
                    <uv-icon v-show="conPassword" class="icon" :name="isShows ? 'eye' : 'eye-off-outline'"
                        @click="isShows = !isShows"></uv-icon>
                </view>
            </view>
        </view>
        <view class="submit-button">
            <uv-button shape="circle" type="primary" text="确认修改" @click="submitForm"></uv-button>
        </view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar/index.vue'
import { updatePassword } from '@/utils/app.js'
export default {
    components: { NavBar },
    data() {
        return {
            isShow: true,
            isShows: true,
            newPassword: '',
            oldPassword: '',
            conPassword: ''
        };
    },
    methods: {
        // 验证密码
        verifyPassword() {
            if (this.oldPassword === '') {
                uni.showToast({
                    title: '请输入原密码',
                    icon: 'none'
                });
                return false;
            }
            if (this.newPassword === '') {
                uni.showToast({
                    title: '请输入新密码',
                    icon: 'none'
                });
                return false;
            }
            if (this.conPassword === '') {
                uni.showToast({
                    title: '请输入确认密码',
                    icon: 'none'
                });
                return false;
            }
            if (this.newPassword !== this.conPassword) {
                uni.showToast({
                    title: '两次密码不一致',
                    icon: 'none'
                });
                return false;
            }
            return true;
        },
        // 修改密码
        submitForm() {
            if (!this.verifyPassword()) {
                return;
            }
            updatePassword({
                oldPassword: this.oldPassword,
                newPassword: this.newPassword,
            }).then(res => {
                console.log(res, 11111);
                if (res && res.code == 200) {
                    uni.showToast({
                        title: '修改成功',
                        icon: 'success'
                    });

                    //1.5秒后返回
                    setTimeout(() => {
                        uni.navigateBack({
                            delta: 1
                        });
                    }, 1500);

                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                }

            })
        },
        goBack() {
            uni.navigateBack({
                delta: 1
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.form-list {
    padding: 0 40rpx;

    .list-item {
        display: flex;
        align-items: center;
        height: 108rpx;
        border-bottom: 2rpx solid #E5E6EB;

        .title {
            width: 144rpx;
            text-align: right;
            margin-right: 20rpx;
        }

        ::v-deep .uv-input {
            border: 0px;
        }

        .password-input {
            flex: 1;
            position: relative;

            .icon {
                position: absolute;
                right: 10rpx;
                top: 20rpx;

            }
        }
    }
}

.submit-button {
    width: 580rpx;
    margin: 0 auto;
    margin-top: 2rem;
}
</style>
